import React, { Component } from 'react';
import { View, StyleSheet, Text } from 'react-native';

class CarPort extends Component {
    render() {
        const { carportList } = this.props;
        return (
            <View>
                {carportList.map((item,index) => {
                    return <View style={styles.carport} key={index}>
                        <View style={styles.itemLeft}>
                            <Text style={styles.rent}>{item.rent}</Text>
                            <Text style={styles.cycle}>{item.cycle}</Text>
                            <Text style={styles.desc}>{item.desc}</Text>
                        </View>
                        <View style={styles.itemRight}>
                            <Text style={styles.place}>{item.place}</Text>
                            <View style={styles.type}>
                                <Text style={styles.typeText}>标准车位</Text>
                            </View>
                            <Text style={styles.on}>{item.on}</Text>
                        </View>
                    </View>
                })}
            </View>
        );
    }
}
const styles = StyleSheet.create({
    carport: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        backgroundColor: "white",
        borderRadius: 15,
        height: 190,
        marginBottom: 20
    },
    itemLeft: {
        paddingLeft: 20,
        width: 220
    },
    rent: {
        marginTop: 40,
        fontSize: 35,
        paddingBottom: 5,
        fontWeight:"bold"
    },
    cycle: {
        color: "#999",
        fontSize: 18,
    },
    desc: {
        marginTop: 10,
        color: "#555"
    },
    itemRight: {
        paddingRight: 20
    },
    place: {
        marginTop: 35,
        fontSize: 20,
        fontWeight:"bold",
        textAlign: "right"
    },
    type: {
        width: 80,
        backgroundColor: "#ff861b",
        borderRadius: 5,
        paddingLeft: 7,
        paddingRight: 7,
        paddingTop: 5,
        paddingBottom: 5,
        marginTop: 7,
        marginBottom: 15,
    },
    typeText: {
        fontSize: 15,
        color: "white",
        textAlign: "right"
    },
    on: {
        fontSize: 17,
        fontWeight: "500",
        marginTop: 5,
        textAlign: "right",
        color: "#57c2d1"
    }
})

export default CarPort;